<template>
	<view>
			<view class="header">
			    <view class="justify-between headerSearch align-center">
			       <view class="city align-center" @click="open" v-if="areaList.length">
			           {{ areaList[areaFocus].name}} <uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
			       </view>
			       <text class="mlr10 line"></text>
			        <input type="text" v-model="keyword" class="flex1" placeholder="请输入关键词搜索" />
			        <uv-icon color="#000" size="28" @click="search" name="search"></uv-icon>
			    </view>
			</view>
			<view class="bgWhite justify-between plr15 ptb15 ft14" style="color: #333333;">
				<view class="align-center" @click="showLabelPicker">
					{{labelType}} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center">
                    <uni-datetime-picker returnType="timestamp"  type="datetime" v-model="single" @change="changeLog"
                    			><view class="flex1 align-center justify-end gray5"> {{timeType}}  <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon></view></uni-datetime-picker
                    		>
					<!-- {{timeType}} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon> -->
				</view>
				<view class="align-center" @click="showGenderPicker">
					{{genderType}} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center" @click="showLevelPicker">
					{{level?level:"段位"}} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
			</view>
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="orderItem bgWhite ptb10 plr10 mb12  mt10 justify-start radius10 " v-for="(item,index) in gyList "
					:key="index"  >
					<image :src="item.pic" mode=""></image>
					<view class="flex-col orderright justify-between ">
						<text class="orderName clamp  mt10">{{item.title}}</text>
				        <view class="justify-start align-center">
				            <text>类型：{{item.label_name}}</text>
				            <text class="ml20">  段位：{{item.level}}档</text>
				        </view>
						<view class="">
							时间：{{item.yuyue_time||""}}
						</view>
				        <view class="justify-between align-center">
				            <view class="remark clamp2">
				                备注：{{item.beizhu||""}}
				            </view>
							
				                <view v-if="item.status==0" @click="apply(item)" class="apply"> 应约 </view>
								<view v-else-if="item.status==1" class="applyed"> 已有约 </view>
                                <view v-else class="applyed"> 已取消 </view>
				        </view>
						
					</view>
				</view>
				
			</view>
			<view class="" v-if="gyList.length==0">
				<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class=" bgWhite paybtn">
		    <view class="justify-between align-center">
		        <view class="align-center justify-between flex1">
		           <view class="flex-col align-center" @click="$utils.toHome()">
		               <image src="../../static/images/index/tabBar1.png" mode="widthFix"></image>
		               首页
		           </view>
		           <button style="line-height: 1.2; font-size: 24rpx;" open-type="contact" @contact="contact" class="flex-col align-center">
		               <image src="../../static/images/middle/chat.png" mode="widthFix"></image>
		               客服
		           </button>
		        </view>
		            <view class="payright align-center">
		                    <view  @click="toApply()" class="onlinePay">发布约球</view>
		            </view>
		    </view>
		</view>	
		<uv-popup ref="popup" bgColor="none" mode="center">
		    <view class="flex-col align-center">
		        <view class="bgWhite popcontent flex-col justify-between plr15" style="height: 558rpx;">
		            <view class="pt15  ">
		                <view class="mb20 popTitle justify-center">
		                    同城应约
		                </view>
		            </view>
					<view @click="showLevelPicker" class="mb5" style="padding-left: 20rpx; height:82rpx;line-height:82rpx;font-size: 30rpx;color: #A7A7A7; background: #F5F5F5;border-radius:8rpx">
						{{level?level:"请选择"}}
					</view>
					<uv-textarea v-model="beizhu"  height="70" customStyle="border:none;flex:none; height:170rpx; background: #F5F5F5;border-radius:8rpx" count placeholder="请输入内容"></uv-textarea>
		            
		           <view class="save_btn" @click="save">
		           	确定应约
		           </view>
		        </view>
		        <uv-icon @click="close" color="#fff" size="35" name="close-circle"> </uv-icon>
		    </view>
		</uv-popup>
		<uv-picker ref="labelPicker" keyName="title"  :columns="[labelList]" @confirm="labelConfirm"></uv-picker>
		<uv-picker ref="genderPicker" keyName="title"  :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" v-model="yuyue_time" mode="datetime" @confirm="timeConfirm">
		</uv-datetime-picker>
		<uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>
		<uv-picker ref="picker" :columns="[areaList]"  keyName="name" @confirm="confirm"></uv-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gyList: [
				],
				genderList: [
						
					{
						id:1,
						title:"女"
					},
					{
						id:2,
						title:"男"
					},
					
				],
				orderList: [],
				page:1,
				labelType:'类型',
				timeType:'时间',
				labelList:[],
				label_id:"",
				keyword:"",
				level:"",
				yuyue_time:null,
				genderType:'性别',
                single:"",
				ballId:"",
				beizhu:"",
				levelList: [{
						name: '1-3段',
						id: 1
					},
					{
						name: '3-5段',
						id: 2
					},
					{
						name: '5-7段',
						id: 3
					},
					{
						name: '7-9段',
						id: 4
					},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
				],
				areaList:[],
				areaFocus:0
			}
		},
		onLoad() {
			
			this.getCate()
			
			this.getArea()
			
			
		},
		mounted() {
			
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
            changeLog(e){
              console.log(e)  
              // this.timeType=e
              this.yuyue_time = e
              this.timeType = this.$utils.formatDateTime(e)
            },
			async getArea(){
			let arealist = await  this.$api.getArea()
			console.log(arealist)
			this.areaList =arealist.data
			
			this.getList()
			},	
			confirm(e){
			  console.log(e)  
			  this.areaFocus=e.indexs[0]
			  this.gyList=[]
			  this.page=1
			  this.getList()
			},
			open(){
			    this.$refs.picker.open()
			},
			click(e) {
				console.log(e)
			},
			search(){
				this.page=1
				this.gyList=[]
				this.getList()
			},
			levelConfirm(e) {
				this.level = e.value[0].name
                this.page=1
                this.gyList=[]
                this.getList()
			},
			showLevelPicker(){
				this.$refs.levelPicker.open()
			},
			labelConfirm(e){
				this.labelType = e.value[0].title
				this.label_id=e.value[0].id
				this.page=1
				this.gyList=[]
				this.getList()
			},
			timeConfirm(e){
				console.log(e)
				this.timeType = this.$utils.formatDateTime(e.value)
				this.page=1
				this.gyList=[]
				this.getList()
			
				
			},
			genderConfirm(e){
				
				this.genderType = e.value[0].title
				this.gender=e.value[0].id
				this.page=1
				this.gyList=[]
				this.getList()
			
				
			},
			showGenderPicker(){
				this.$refs.genderPicker.open()
			},
			showLabelPicker(){
				this.$refs.labelPicker.open()
			},
			showTimePicker(){
				this.$refs.datetimePicker.open()
			},
			toUserList() {
				uni.navigateTo({
					url: '/pages/artist/index'
				})
			},
			toAct() {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			},
			toBooking() {
				uni.switchTab({
					url: '/pages/tabbar/chat'
				})
			},
			toApply() {
                
				uni.navigateTo({
					url: '/pages/addBall/index'
				})
			},
			
			async getList() {
				const {
					list
				} = await this.$api.aboutBall({
					page:this.page,
					area_id: this.areaList[this.areaFocus].id,
					
					label_id:this.label_id,
					gender:this.gender,
					yuyue_time:this.yuyue_time,
					level:this.level,
					keyword:this.keyword
				})
				console.log(list)
				this.gyList =[...this.gyList,...list]
			},
			async getCate() {
				const 	list	 = await this.$api.labelLsts()
				console.log(list)
					this.labelList = list.data
				
			},
			async getList2() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 3
				})
				console.log(code, data)
				if (code == 200) {
					this.orderList = data
				}
			},

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
				uni.navigateTo({
					url: '/pages/userMain/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			},
			apply(data){
				this.ballId=data.id
				this.level=''
				this.beizhu=''
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			save(){
				this.$api.ballYingyue({
					level:this.level,
					beizhu:this.beizhu,
					id:this.ballId
				}).then(res=>{
					uni.showToast({
						title:'应约成功',
						icon:'none'
					})
					this.$refs.popup.close()
				})
			}
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
	.orderItem {
		font-size: 24rpx;
		color: #666;
		width: 100%;
		image {
			width: 205rpx;
			height: 205rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;
            flex-shrink: 0;
		}
	
		.orderright {
			flex: 1;
	
			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}
	
			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
            .remark{
                width: 300rpx;
            }
		}
	
		.apply {
			width: 116rpx;
			height: 48rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;
		}
			
		.applyed{
		width: 116rpx;
		height: 48rpx;
		background: #464646;
		border-radius: 60rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
		}
	}
	.paybtn{
	    box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    padding: 20rpx 30rpx;
	    background-color: #fff;
	    font-weight: 500;
	    font-size: 24rpx;
	    color: #222222;
	    .payright{
	        margin-left: 40rpx;
	        view{
	            width:466rpx;
	            height: 84rpx;
	            border-radius: 50rpx ;
	            color: #fff;
	            line-height: 84rpx;
	            font-size: 30rpx;
	            text-align: center;
	            font-weight: bold;
	            background-color: #343434;
	        }
	        .onlinePay{
	          border-radius: 50rpx ;
	            background: #01C588;
	            color: #fff;
	            
	        }
	    }
	    
	    image{
	        width: 44rpx;
	    }
	 
	  
	}
	.save_btn {
		width: 100%;
		height: 90rpx;
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		background: #2CC6A1;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
</style>